<template>
    <div class="friend">
        <FriendsList @on_click="setId" class="left"></FriendsList>
        <chatMode :friendId="friendId" :friendName="friendName" class="right"></chatMode>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import FriendsList from "./friendsList.vue";
import chatMode from "./chatMode.vue";
let friendId=ref<string>("")
let friendName=ref<string>("")
const setId=(e:{name:string,id:string})=>{
    friendId.value=e.id
    friendName.value=e.name
}
</script>

<style lang=less  scoped>
.friend {
    .flexAc();

    .left {
        width: 25%;
        display: flex;
        overflow: hidden;
        // flex-wrap: wrap;
        flex-direction: column;
        height: 100%;

        border-right: 1px solid #D6D6D6;
        // padding-right: 3vw;
    }

    .right {
        width: 70%;
        height: 100%;

    }
}
</style>